import { Button, Card, Drawer, Form, Input, Select, Space, Switch, Affix, App, TreeSelect } from "antd";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import * as Icons from "@ant-design/icons";
import { Icon } from "../../Layout/Desktop/Icon";
import { FormattedMessage, useIntl } from "react-intl";

export const IconSelector = (props: any) => {
    const [ open, setOpen ] = useState(false);
    const [ searchInput, setSearchInput ] = useState("");
    const [ iconKeys ] = useState(() => Object.keys(Icons)
        .filter((v) => !["createFromIconfontCN","IconProvider","default","create","getTwoToneColor","setTwoToneColor"].includes(v)));
    const onClick = useCallback(() => {
        setOpen(true);
    }, []);
    const onClose = useCallback(() => {
        setOpen(false);
    }, []);
    const [ selectedValue, setSelectedValue ] = useState<string>(props.value);
    const [ selectedIcon, setSelectedIcon ] = useState<string>(props.value);
    const renderIconKeys = useMemo(() => {
        return iconKeys.filter((v) => {
            if(searchInput) {
                return v.includes(searchInput);
            }
            return true;
        });
    }, [searchInput, iconKeys]);
    const intl = useIntl();
    const onConfirm = useCallback(() => {
        onClose();
        setSelectedValue(selectedIcon);
        typeof props.onChange === "function" && props.onChange(selectedIcon);
    }, [selectedIcon]);
    return (<>
        <Button
            style={{marginBottom: 15}}
            onClick={onClick}
            icon={selectedValue ? <Icon type={selectedValue as any}/> : null}
        >
            {!selectedValue ? <FormattedMessage id="admin.layout.pleaseSelect" /> : ""}
        </Button>
        <Drawer
        title={<FormattedMessage id="admin.pages.menus.edit.selectIcon"/>}
        onClose={onClose}
        open={open}
        size="default"
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        extra={
          <Space>
            <Button onClick={() => setSelectedIcon("")}><FormattedMessage id="admin.layout.form.search.clear"/></Button>
            <Button onClick={onClose}><FormattedMessage id="admin.layout.modal.cancel"/></Button>
            <Button onClick={onConfirm} type="primary">
              <FormattedMessage id="admin.layout.modal.confirm"/>
            </Button>
          </Space>
        }
      >
        <section>
            <Affix offsetTop={90}>
                <Input.Search placeholder={intl.formatMessage({id: "admin.layout.placeholder.search"})} onSearch={(value) => setSearchInput(value)} enterButton />
            </Affix>
            <div style={{paddingTop: 15}}>
                <Space size={[8, 16]} wrap>
                    {
                        renderIconKeys.map((iconName, index) => {
                            return <Button
                                type={selectedIcon === iconName ? "primary" : "default"}
                                onClick={() => setSelectedIcon(iconName)}
                                key={index}
                                icon={<Icon type={iconName as any}/>}
                                title={iconName}
                            />
                        })
                    }
                </Space>
            </div>
        </section>
      </Drawer>
    </>);
};